import type { Query } from '@/interface/Query';
import { ref , onMounted } from 'vue'
import type { User } from "@/interface/User"
import { listApi , bindPropertyApi  , userRoleOperatorApi , operatorApi } from "@/controller/UserApi";
import type { TableColumnsType } from 'ant-design-vue';
import type { UserTenement } from "@/interface/UserTenement";
import { message } from "ant-design-vue";
import type {UserRole} from "@/interface/UserRole";

export default function () {

    onMounted(()=> {
        getUsers();
    });

    let queryModel = ref({
        page : 1,
        size: 15
    } as Query);

    let searchBox = ref(true);
    

    function getUsers() {
        listApi(queryModel.value).then(res => {
            if(res.code == 200) {
                tableData.value = res.data.records;
                total.value = parseInt(res.data.totalRow);
            }
        });
    }



    function resetQuery() {
        queryModel.value = {
            page : 1,
            size: 15
        } as Query;
        getUsers();
    }

    let columns = ref<TableColumnsType>([
        {
            title: '用户名',
            dataIndex: 'name',
            fixed: 'left',
            width: 150,
            align: 'center',
            resizable: true
        },
        {
            title: '关联物业',
            dataIndex: 'properties',
            width: 150,
            align: 'center',
            resizable: true
        },
        {
            title: '联系电话',
            dataIndex: 'phoneNumber',
            width: 150,
            align: 'center',
            resizable: true
        },
        {
            title: '状态',
            dataIndex: 'isActive',
            width: 150,
            align: 'center',
            resizable: true
        },
        {
            title: '创建时间',
            dataIndex: 'createTime',
            width: 150,
            align: 'center',
            resizable: true
        },
        {
            title: '操作',
            dataIndex: 'action',
            fixed: 'right',
            align: 'center',
            width: 260,
            resizable: true
        },
    ])

    function handleResizeColumn(w : any, col : any) {
        col.width = w;
    }

    let total = ref(0);
    function pageChange(page: number,size: number) {
        queryModel.value.page = page;
        queryModel.value.size = size;
        getUsers();
    }

    let tableData = ref<User[]>([] )

    let moduleStore = ref({
       userInfo : {} as User,
       allocatePropertyOpen: false,
       roleOpen : false
    });
    function propertyAllocate(user : User) {
        moduleStore.value.userInfo = user;
        moduleStore.value.allocatePropertyOpen = true;
    }

    function roleAllocate(user : User) {
        moduleStore.value.userInfo = user;
        moduleStore.value.roleOpen = true;
    }

    function cancelAllocate() {
        moduleStore.value.userInfo = {} as User;
        moduleStore.value.allocatePropertyOpen = false;
        moduleStore.value.roleOpen = false;
    }

    let  userTenement = ref({} as UserTenement);

    function acceptPropertyId(propertyId : string) {
        userTenement.value.tenementId = propertyId;
        userTenement.value.userId = moduleStore.value.userInfo.id as string;
        bindPropertyApi(userTenement.value).then(res => {
            if(res.code == 200) {
                moduleStore.value.allocatePropertyOpen = false;
                // getUsers();
                message.success("物业分配成功");
            }else {
                message.error("物业分配失败");
            }
        });
    }

    function acceptUserRole(data : UserRole) {
        userRoleOperatorApi(data).then(res => {
            if(res.code == 200) {
                moduleStore.value.roleOpen = false;
                message.success("角色分配成功!");
            }else {
                message.error("角色分配失败!")
            }
        });
    }

    let operatorStore = ref({
        open : false,
        user : {} as User,
        cmd : 0
    });

    let formRef = ref();

    function operator(cmd : number) {
        operatorStore.value.cmd = cmd;
        operatorStore.value.open = true;
    }

    function operatorSubmit() {
        formRef.value.validate().then( (res : any) => {
            operatorApi(operatorStore.value.user).then(res => {
                if (res.code == 200) {
                    message.success("添加用户成功!");
                    getUsers();
                    resetFrom();
                }else {
                    message.error(res.msg);
                }
            });
        })
    }

    let rules = {
        name : [{ required : true , message : "请输入用户名" }],
        phoneNumber : [{ required : true , message : "请输入联系电话" }]
    }

    function resetFrom() {
        formRef.value.resetFields();
        operatorStore.value.open = false;
        operatorStore.value.user = {} as User;
    }


    return {
        queryModel , searchBox , resetQuery ,
        getUsers , columns , tableData ,
        pageChange , handleResizeColumn , propertyAllocate ,
        moduleStore , cancelAllocate , acceptPropertyId ,
        roleAllocate , acceptUserRole , total , operatorStore ,
        operator , formRef , operatorSubmit , resetFrom , rules
    }
}
